import React from 'react';
import {Radio,ColorPicker} from 'zent';
//import  from 'colorpicker';

import { DesignEditor, ControlGroup } from 'zent/lib/design/editor/DesignEditor';

const RadioGroup = Radio.Group;
const DEFAULT_COLOR = '#e5e5e5';

export default class LineEditor extends DesignEditor {
    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }
  render() {
    const { prefix, value, showError, validation } = this.props;

    return (
      <div>
        <div className={`xkd-moduleTitle`} style={{fontSize:'14px'}}>辅助线</div>
        <div className={`${prefix}-design-component-line-editor`}>
          <ControlGroup
            label="颜色:"
            showError={showError || this.getMetaProperty('color', 'touched')}
            error={validation.color}
          >
            <ColorPicker
              className={`${prefix}-design-component-line-editor_color-select`}
              color={value.color}
              onChange={this.onColorChange}
            />
            <span
              className={`${prefix}-design-component-line-editor_color-reset`}
              onClick={this.onColorReset}
            >
              重置
            </span>
          </ControlGroup>
          <ControlGroup
            label="边距:"
            showError={showError || this.getMetaProperty('hasPadding', 'touched')}
            error={validation.hasPadding}
          >
            <RadioGroup value={value.hasPadding} onChange={this.onInputChange}>
              <Radio name="hasPadding" value={false}>
                无边距
              </Radio>
              <Radio name="hasPadding" value>
                左右留边
              </Radio>
            </RadioGroup>
          </ControlGroup>
          <ControlGroup
            label="样式:"
            showError={showError || this.getMetaProperty('lineType', 'touched')}
            error={validation.lineType}
          >
            <RadioGroup value={value.lineType} onChange={this.onInputChange}>
              <Radio name="lineType" value="solid">
                实线
              </Radio>
              <Radio name="lineType" value="dashed">
                虚线
              </Radio>
              <Radio name="lineType" value="dotted">
                点线
              </Radio>
            </RadioGroup>
          </ControlGroup>
        </div>
      </div>
    );
  }

  onColorChange = this.onCustomInputChange('color');

  onColorReset = () => {
    this.onColorChange(DEFAULT_COLOR);
  };

  static designType = 'line';
  static designDescription = '辅助线';

  static getInitialValue() {
    return {
      color: DEFAULT_COLOR,
      hasPadding: false,
      lineType: 'solid',
    };
  }
}
